<template>
	<view>
		<div class="container" ref="container" id="container" :prop='imageName' :change:prop='three.onUpdateChange'>
		</div>
	</view>
</template>

<script>
	export default {
		props: ['imageName'],
		mounted() {
			console.log("vr render mounted", this.imageName)
		}
	}
</script>

<script module='three' lang="renderjs">
	import * as THREE from 'three';
	import {
		OrbitControls
	} from 'three/examples/jsm/controls/OrbitControls';
	import {
		RGBELoader
	} from 'three/examples/jsm/loaders/RGBELoader';
	export default {
		mounted() {
			console.log("renderjs, props: this.imageName", this.imageName);
			// 初始化vr
			this.init()
		},
		methods: {
			onUpdateChange(newval, oldval, ownerInstance, instance) {
				console.log("接收prop:", newval)
			},
			init() {
				console.log('屏幕宽度：', window.innerWidth);
				console.log('屏幕高度：', window.innerHeight);
				// 获取容器
				const container = this.$refs.container;
				// 初始场景
				const scene = new THREE.Scene()
				// 初始化相机
				const camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000)
				// 相机位置
				camera.position.z = 5
				// 初始化渲染器
				console.log("是否支持WebGL", uni.canIUse('webgl')) // 是否支持WebGL
				const renderer = new THREE.WebGLRenderer()
				renderer.setSize(window.innerWidth, window.innerHeight)
				renderer.setClearColor(0xEEEEEE);

				// ***************************************
				// 添加球体
				const geometry = new THREE.SphereGeometry(5, 32, 32)
				const meterial = new THREE.MeshBasicMaterial()
				// 这里图片的地址默认位置在public文件下方，所以测试的图片直接添加在public文件夹内部即可
				// 固定图片
				// let texture = new THREE.TextureLoader().load('./static/images/panorama/BeiOu-WoShi.jpeg')
				// 传入图片名称
				console.log("this.$ownerInstance.$vm.imageName", this.$ownerInstance.$vm.imageName)
				let texture = new THREE.TextureLoader().load('./static/images/panorama/images/' + this.$ownerInstance.$vm
					.imageName)
				// 网络资源地址
				// let texture = new THREE.TextureLoader().load('http://www.yanhuangxueyuan.com/3D/houseDesign/%E9%A3%8E%E6%A0%BC/%E6%96%B0%E5%8F%A4%E5%85%B8/%E5%AE%A2%E9%A4%90%E5%8E%85/0011.jpg')
				meterial.map = texture
				const sphere = new THREE.Mesh(geometry, meterial)
				// 改变视角，进入球体内部
				sphere.geometry.scale(1, 1, -1)
				scene.add(sphere)

				// ***************************************
				// 添加控制器，实现视角的缩放，旋转
				const controls = new OrbitControls(camera, container)
				// controls.enableDamping = true
				// 容器上面添加渲染器
				container.appendChild(renderer.domElement)
				// 逐帧渲染
				const circleRender = () => {
					renderer.render(scene, camera)
					requestAnimationFrame(circleRender)
				}
				circleRender()
			},
		},
	}
</script>

<style>
</style>